<template>
  <view class="official-detail-container">
    <!-- Header image -->
    <image class="header-image" :src="contentData.imageUrl" mode="aspectFill" />

    <!-- Back button -->
    <view class="back-button" @click="goBack">
      <text class="back-icon">〈</text>
    </view>

    <!-- Content area -->
    <view class="content-area">
      <view class="content-header">
        <text class="content-title">{{ contentData.title }}</text>
        <view class="content-meta">
          <text class="content-type">{{ getContentTypeText(contentData.type) }}</text>
          <text class="content-date">{{ getCurrentDate() }}</text>
        </view>
      </view>

      <view class="content-body">
        <text class="content-paragraph">{{ contentData.content }}</text>

        <!-- Additional content blocks could be dynamically loaded based on content type -->
        <!-- <block v-if="contentData.type === 'transport'">
          <view class="transport-info">
            <view class="info-title">
              <text class="icon">🚌</text>
              <text>交通出行信息</text>
            </view>
            <view class="info-item">
              <text class="item-label">公交线路：</text>
              <text class="item-value">1路、2路、5路、8路、旅游专线1-5号</text>
            </view>
            <view class="info-item">
              <text class="item-label">运营时间：</text>
              <text class="item-value">06:00-22:00</text>
            </view>
            <view class="info-item">
              <text class="item-label">票价信息：</text>
              <text class="item-value">1元起，刷卡9折</text>
            </view>
          </view>
        </block>

        <block v-if="contentData.type === 'event'">
          <view class="event-info">
            <view class="info-title">
              <text class="icon">🎭</text>
              <text>活动详情</text>
            </view>
            <view class="info-item">
              <text class="item-label">活动时间：</text>
              <text class="item-value">2023年10月1日-7日</text>
            </view>
            <view class="info-item">
              <text class="item-label">活动地点：</text>
              <text class="item-value">莒州古城广场</text>
            </view>
            <view class="info-item">
              <text class="item-label">参与方式：</text>
              <text class="item-value">免费入场</text>
            </view>
          </view>
        </block>

        <block v-if="contentData.type === 'culture'">
          <view class="culture-info">
            <view class="info-title">
              <text class="icon">🏛️</text>
              <text>文化遗产</text>
            </view>
            <view class="info-item">
              <text class="item-label">开放时间：</text>
              <text class="item-value">每日 09:00-17:00（16:30停止入场）</text>
            </view>
            <view class="info-item">
              <text class="item-label">门票信息：</text>
              <text class="item-value">成人票 60元，学生票 30元</text>
            </view>
            <view class="info-item">
              <text class="item-label">位置：</text>
              <text class="item-value">莒县博物馆东侧500米</text>
            </view>
          </view>
        </block> -->
      </view>

      <!-- Related recommendations -->
      <!-- <view class="related-section">
        <text class="section-title">相关推荐</text>
        <view class="related-items">
          <view class="related-item" v-for="(item, index) in relatedItems" :key="index"
            @click="navigateToRelated(item)">
            <image class="related-image" :src="item.imageUrl" mode="aspectFill" />
            <text class="related-title">{{ item.title }}</text>
          </view>
        </view>
      </view> -->
    </view>

    <!-- Share button -->
    <view class="action-button">
      <button class="share-button" open-type="share">
        <text class="share-icon">分享</text>
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 从路由获取内容ID和类型
const contentId = ref('');
const contentType = ref('');
const contentData = ref({
  id: '',
  title: '加载中...',
  subtitle: '',
  imageUrl: '',
  content: '内容加载中...',
  type: ''
});

// 默认内容，当请求的内容不存在时显示
const defaultContent = {
  id: 'default-content',
  title: '莒县旅游指南',
  subtitle: '探索莒县的历史文化与自然风光',
  imageUrl: 'https://images.unsplash.com/photo-1528164344705-47542687000d?auto=format&fit=crop&q=80&w=1920',
  content: '莒县，位于山东省东南部，是一个拥有悠久历史和丰富文化遗产的地方。这里是春秋时期莒国的所在地，有着2500多年的建城史，被誉为"海右邹鲁，文化莒县"。\n\n莒县的旅游资源丰富多彩，有浮来山、莒国故城、浮来泉等自然与人文景观。每年，这里举办多种文化活动和节庆，吸引了众多游客前来观光体验。\n\n除了历史文化景点，莒县还以其独特的饮食文化而闻名。莒县煎饼、莒县豆腐等特色美食，是游客不可错过的味觉体验。\n\n无论您是历史文化爱好者，还是自然风光探索者，莒县都能为您提供丰富多彩的旅游体验。欢迎来到莒县，发现这片土地上的无限魅力！',
  type: 'travel'
};

// 相关推荐内容
const relatedItems = ref([
  {
    id: 'related-1',
    title: '莒县博物馆藏品展览',
    imageUrl: 'https://images.unsplash.com/photo-1566438480900-0609be27a4be?auto=format&fit=crop&q=80&w=1920',
    type: 'culture'
  },
  {
    id: 'related-2',
    title: '莒县民宿推荐',
    imageUrl: 'https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&q=80&w=1920',
    type: 'travel'
  }
]);

onMounted(() => {
  // 获取路由参数，修复获取方式
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options || {};

  contentId.value = options.id || '';
  contentType.value = options.type || '';

  // 获取内容数据
  fetchContentData();
});

// 获取内容数据
function fetchContentData() {
  // 使用与index.vue相同的数据结构
  const mockData = {
    'jusu-tourism-1': {
      id: 'jusu-tourism-1',
      title: '莒县文化旅游节',
      subtitle: '传统民俗体验，特色文艺演出，尽在金秋文化旅游节',
      imageUrl: 'https://images.unsplash.com/photo-1533669955142-6a73332af4db?auto=format&fit=crop&q=80&w=1920',
      content: '莒县文化旅游节将于10月1日至7日在莒州古城举行，活动包括传统民俗展演、非遗文化展示、特色文艺演出等内容，诚邀各地游客前来参观体验。\n\n本届旅游节以"古韵新风"为主题，将展示莒县丰富的文化遗产和旅游资源。主会场设在莒州古城广场，分设民俗体验区、美食品鉴区、文化展示区和互动娱乐区四大功能区。\n\n活动亮点包括传统戏曲表演、民间工艺展示、特色小吃品鉴会以及夜间灯光秀。游客还可以参与制作传统手工艺品，体验莒县独特的民俗文化。',
      type: 'event'
    },
    'jusu-transport-1': {
      id: 'jusu-transport-1',
      title: '莒县交通出行指南',
      subtitle: '最新公交线路、班次时刻表及景区直达服务',
      imageUrl: 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&q=80&w=1920',
      content: '莒县公交线路已全面升级，新增5条旅游专线连接主要景点，班次密集，方便游客出行。景区直达班车每30分钟一班，覆盖所有4A级以上景区。\n\n新增的旅游专线1号线连接火车站、汽车站与莒州古城；2号线连接城区与浮来山风景区；3号线连接城区与莒国故城遗址；4号线和5号线分别覆盖县域东部和西部的乡村旅游点。\n\n此外，莒县还推出了"畅游莒县"交通一卡通，游客可以在各大售票点购买，3天内无限次乘坐公交和旅游专线，非常便捷。',
      type: 'transport'
    },
    'jusu-tour-1': {
      id: 'jusu-tour-1',
      title: '莒国故城考古发现',
      subtitle: '春秋时期莒国都城遗址出土珍贵文物',
      imageUrl: 'https://images.unsplash.com/photo-1501555088652-021faa106b9b?auto=format&fit=crop&q=80&w=1920',
      content: '考古学家近日在莒县莒国故城遗址发现大量春秋时期文物，包括精美青铜器、玉器等，展现了2500年前莒国的繁荣景象。相关文物正在莒县博物馆展出。\n\n本次发掘的重要发现包括一座保存完好的春秋中期贵族墓葬，出土了青铜礼器、玉佩、陶器等珍贵文物200余件。其中最引人注目的是一件刻有"莒公"二字的青铜鼎，为研究莒国历史提供了重要实物资料。\n\n莒县博物馆为此专门设立了"莒国文化展"，集中展示此次考古发现的精品文物，同时通过多媒体技术重现了春秋时期莒国的历史风貌。展览将持续至年底，欢迎广大市民和游客前来参观。',
      type: 'culture'
    }
  };

  if (contentId.value && mockData[contentId.value]) {
    contentData.value = mockData[contentId.value];
  } else {
    // 当找不到内容时，使用默认内容而不是显示错误
    contentData.value = defaultContent;

    // 友好提示
    uni.showToast({
      title: '已为您推荐其他内容',
      icon: 'none',
      duration: 2000
    });

    // 更新URL以匹配默认内容，避免页面刷新时再次出错
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    if (currentPage && currentPage.$page) {
      currentPage.$page.options.id = defaultContent.id;
      currentPage.$page.options.type = defaultContent.type;
    }
  }

  // 根据内容类型加载相关推荐
  updateRelatedItems(contentData.value.type);
}

// 更新相关推荐内容
function updateRelatedItems(contentType) {
  // 根据当前内容类型选择相关推荐
  const allRecommendations = {
    'event': [
      {
        id: 'related-event-1',
        title: '莒县传统节日活动指南',
        imageUrl: 'https://images.unsplash.com/photo-1565035010268-a3816f98589a?auto=format&fit=crop&q=80&w=1920',
        type: 'event'
      },
      {
        id: 'related-event-2',
        title: '莒县民俗体验活动',
        imageUrl: 'https://images.unsplash.com/photo-1519671482749-fd09be7ccebf?auto=format&fit=crop&q=80&w=1920',
        type: 'event'
      }
    ],
    'transport': [
      {
        id: 'related-transport-1',
        title: '莒县景点交通攻略',
        imageUrl: 'https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?auto=format&fit=crop&q=80&w=1920',
        type: 'transport'
      },
      {
        id: 'related-transport-2',
        title: '自驾游莒县最佳路线',
        imageUrl: 'https://images.unsplash.com/photo-1506765515384-028b60a970df?auto=format&fit=crop&q=80&w=1920',
        type: 'transport'
      }
    ],
    'culture': [
      {
        id: 'related-culture-1',
        title: '莒县博物馆藏品展览',
        imageUrl: 'https://images.unsplash.com/photo-1566438480900-0609be27a4be?auto=format&fit=crop&q=80&w=1920',
        type: 'culture'
      },
      {
        id: 'related-culture-2',
        title: '莒县非物质文化遗产探索',
        imageUrl: 'https://images.unsplash.com/photo-1582555172866-f73bb12a2ab3?auto=format&fit=crop&q=80&w=1920',
        type: 'culture'
      }
    ],
    'travel': [
      {
        id: 'related-travel-1',
        title: '莒县民宿推荐',
        imageUrl: 'https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&q=80&w=1920',
        type: 'travel'
      },
      {
        id: 'related-travel-2',
        title: '莒县一日游经典路线',
        imageUrl: 'https://images.unsplash.com/photo-1527631746610-bca00a040d60?auto=format&fit=crop&q=80&w=1920',
        type: 'travel'
      }
    ]
  };

  // 设置相关推荐，如果没有匹配的推荐则使用默认推荐
  relatedItems.value = allRecommendations[contentType] || allRecommendations['travel'];
}

// 返回上一页
function goBack() {
  uni.navigateBack();
}

// 获取内容类型文本
function getContentTypeText(type) {
  const typeMap = {
    'event': '活动资讯',
    'transport': '交通出行',
    'culture': '文化遗产',
    'travel': '旅游指南'
  };
  return typeMap[type] || '官方资讯';
}

// 获取当前日期
function getCurrentDate() {
  const date = new Date();
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
}

// 跳转到相关内容
function navigateToRelated(item) {
  uni.navigateTo({
    url: `/pages/zhixun/official-detail?id=${item.id}&type=${item.type}`
  });
}
</script>

<style>
.official-detail-container {
  position: relative;
  min-height: 100vh;
  background-color: #f8f0e3;
}

.header-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.back-button {
  position: absolute;
  top: 40px;
  left: 15px;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.back-icon {
  color: white;
  font-size: 18px;
  font-weight: bold;
}

.content-area {
  position: relative;
  margin-top: -40px;
  padding: 20px;
  background-color: #fff;
  border-radius: 20px 20px 0 0;
  min-height: calc(100vh - 210px);
}

.content-header {
  margin-bottom: 20px;
}

.content-title {
  font-size: 22px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  display: block;
}

.content-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.content-type {
  font-size: 14px;
  color: #8b6b4a;
  background-color: rgba(139, 107, 74, 0.1);
  padding: 3px 10px;
  border-radius: 15px;
}

.content-date {
  font-size: 14px;
  color: #999;
}

.content-body {
  margin-bottom: 30px;
}

.content-paragraph {
  font-size: 16px;
  color: #333;
  line-height: 1.8;
  margin-bottom: 20px;
  display: block;
}

.transport-info,
.event-info,
.culture-info {
  margin-top: 20px;
  padding: 15px;
  background-color: #f8f0e3;
  border-radius: 10px;
}

.info-title {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.info-title .icon {
  margin-right: 5px;
  font-size: 18px;
}

.info-title text {
  font-size: 16px;
  font-weight: bold;
  color: #8b6b4a;
}

.info-item {
  margin-bottom: 8px;
  display: flex;
}

.item-label {
  font-size: 14px;
  color: #666;
  width: 80px;
  flex-shrink: 0;
}

.item-value {
  font-size: 14px;
  color: #333;
  flex: 1;
}

.related-section {
  margin-top: 30px;
  padding-bottom: 50px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  display: block;
}

.related-items {
  display: flex;
  overflow-x: auto;
  gap: 12px;
}

.related-item {
  flex: 0 0 140px;
  width: 140px;
}

.related-image {
  width: 140px;
  height: 90px;
  border-radius: 8px;
  margin-bottom: 6px;
  object-fit: cover;
}

.related-title {
  font-size: 14px;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.action-button {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  z-index: 10;
}

.share-button {
  width: 100%;
  height: 44px;
  background-color: #8b6b4a;
  color: white;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  outline: none;
}

.share-icon {
  font-size: 16px;
  color: white;
}
</style>
